*{
    padding:0px;
    margin:0px;
}
html{
    width:100%;
    height:100%;
    font-size:12px;
}
body{
    color:#fff;
    width:100%;
    height:100%;
    font-family:"microsoft Yahei";
    background:url("../img/bg.png") no-repeat left top;
    overflow: hidden;
}
ul,li{
    list-style-type:none;
}
a{
    color:#fff;
    text-decoration:none;
}
a:hover{
    text-decoration:none;
    color:#E8E8E9;
}
body{
    position:relative;
}
.header{
    width:60%;
    height: 9%;
    background:url("../img/headbg.png") no-repeat center bottom;
    background-size:100% 100%;
    margin:0 auto;
    font-size:2.4rem;
    font-weight:900;
    text-align:center;
    color:#00eaff;
}
.footer{
    position:absolute;
    right:0px;
    bottom:0px;
    z-index:3;
    width:22%;
    height:20%;
    background:url("../img/login_map.png") no-repeat center bottom;
    background-size:100% 100%;
}
.footer1{
    position:absolute;
    left:0px;
    bottom:0px;
    z-index:3;
    width:78%;
    height:20%;
    background:url("../img/login_start.png") no-repeat center bottom;
    background-size:100% 100%;
}
.containner{
    position:absolute;
    height:calc(80% - 70px);
    left:14%;top:80px;
}
.containner{
    z-index:3
}
.containner1{
    z-index:2
}
.containner2{
    z-index:0;
}
.containner3{
    z-index:0
}
.containner4{
    z-indeX:99
}
.login_imgtb{
    position:absolute;
    z-index:99;
    width:120%;
    height:120%;
}
.login_imgtb ul{
    width:100%;
    height:100%;
}
.login_imgtb ul li{
    width:15%;
    height:15%;

}

.login_imgtb ul li img{
    width:80%;
}
.login_imgtb ul li:nth-child(1){
    position:absolute;
    left: -19%;
    top: 52%;
}
.login_imgtb ul li:nth-child(2){
    position:absolute;
    left: 80%;
    top: 23%;
}
.login_imgtb ul li:nth-child(3){
    position:absolute;
    left:58%;
    top:57%;
}
.login_imgtb ul li.login_activeAnimate{
    animation: ceartop 1s linear infinite alternate;
}
@keyframes ceartop {
    to {
        transform: translateY(-50px);
    }
}
.loginmain{
    width:100%;
    height:100%;
    text-align:center;
    background:url("../img/round_bg1.png") no-repeat center center;
    background-size:75% 75%;
    position:absolute;
    z-index:9999;
}
.login_sc {
    position:absolute;
    background:url("../img/round_bgyj.png") no-repeat center center;
    background-size:100% 100%;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:999;
}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
img.login_car{
    width:100%;
    height:76%;
    position:absolute;
    left:-3%;
    top:8%;
}
.imground{
    width:50%;height:50%;margin:25% auto;
    -webkit-transform: rotate(360deg);
    animation: rotation 8s linear infinite;
    -moz-animation: rotation 8s linear infinite;
    -webkit-animation: rotation 8s linear infinite;
    -o-animation: rotation 8s linear infinite;
}
ul.login_menu{
    width:50%;
    height:50%;
    position:absolute;
    left:25%;
    top:25%;
}
ul.login_menu li{
    width:100%;
    height:100%;
    display:none;
}
ul.login_menu li.login_active{
    display:block
}
.login_camera{
    position: relative;
    width:100%;
    height: 100%;
}
.login_camera .login_camei{
    display: block;width:100%;height: 100%;z-index:99;
    position: absolute;left: -10px;top: -10px;border-radius: 50%;
    border: 10px solid transparent;
    animation-timing-function:linear;
    -webkit-transform: rotate(360deg);
    animation: cameraIcon 8s linear infinite;
    -moz-animation: cameraIcon 8s linear infinite;
    -webkit-animation: cameraIcon 8s linear infinite;
    -o-animation: cameraIcon 8s linear infinite;
}
@-webkit-keyframes cameraIcon{
    from {-webkit-transform: rotate(360deg);}
    to {-webkit-transform: rotate(0deg);}
}
.login_camera .login_camei .login_camespan{
    position: absolute;
    left:62%;
    top: 46px;
    width:100%;
    height:100%;
}
.login_camera .login_camei .login_camespan img{
    transform: rotate(-108deg);
    position:absolute;
}
.login_leida{
    transform: rotate(33deg);
}
.login_leida span {
    overflow: hidden;
    position: absolute;
    top: 115px;
    left: -82px;
    display: block;
    width: 254px;
    height: 0;
    animation: camera 2.2s linear .1s infinite;
}
.login_leida span:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(50deg, rgba(47, 244, 255, 0) 50%, #2ff4ff 200%);
    background-image: linear-gradient(50deg, rgba(47, 244, 255, 0) 50%, #2ff4ff 200%);
    width: 180px;
    height: 180px;
    position: absolute;
    top: 37px;
    left: 38px;
    transform: rotate(-42deg)
}
@keyframes camera {
    100%{
        height: 160px;
    }
}
.login_circle{
    width:76%;
    height:76%;
    position:absolute;
    left:12%;
    top:12%;
    background:url("../img/circle.png") no-repeat left center;
    background-size:100% 100%;
    animation-timing-function:linear;
    -webkit-transform: rotate(360deg);
    animation: cameraIcon 8s linear infinite;
    -moz-animation: cameraIcon 8s linear infinite;
    -webkit-animation: cameraIcon 8s linear infinite;
    -o-animation: cameraIcon 8s linear infinite;
    z-index:5;
}
.login_peoplezd{
    position: absolute;
    top: 20%;
    left: 27%;
    width: 47%;
    height: 62%;
    background: url(../img/head.png) no-repeat center top;
    background-size:100% 100%;
    z-index: 2;
    border-radius: 100%;
    overflow: hidden;
}
.login_peoplezd:after {
    content: ' ';
    display: block;
    background: url(../img/line.png) center 0 no-repeat;
    background-size:100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -340px;
    left: 0;
    animation: lineAni 2.5s linear infinite alternate;
}
@keyframes lineAni {
    to {
        transform: translateY(-340px);
    }
}

.map-outer,.map {
    position: absolute;
    top: 12%;
    left: 6%;
    width: 86%;
    height: 73%;
    z-index: 3;
}
.map {
    background: url(../img/map.png) center center no-repeat;
    background-size:100% 100%;
}
.map span {
    display: block;
    position: absolute;
    width: 23px;
    height: 30px;
    background: url(../img/location.png) center center no-repeat;
    z-index: 3;
}
.map i {
    position: absolute;
    width: 18px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(60,205,199,.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 2;
}
.map i:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    width: 6px;
    height: 4px;
    border-radius: 50%;
    background-color: #3bcdc7;
}
.map span:nth-child(1){
    top: 32%;
    left: 51%;
    animation: location 1.5s linear .1s infinite alternate;
}
.map span:nth-child(2){
    top: 54%;
    left: 64%;
    animation: location 1.5s linear .2s infinite alternate;
}
.map span:nth-child(3){
    top: 33%;
    left: 23%;
    animation: location 1.5s linear .3s infinite alternate;
}
.map span:nth-child(4){
    top: 61%;
    left: 45%;
    animation: location 1.5s linear .4s infinite alternate;
}
.map i:nth-child(5) {
    top: calc(32% + 30px);
    left:calc(51% + 2px);
    animation: locationBottm 1.5s linear .1s infinite;
}
.map i:nth-child(6) {
    top: calc(54% + 30px);
    left:calc(64% + 2px);
    animation: locationBottm 1.5s linear .2s infinite;
}
.map i:nth-child(7) {
    top: calc(33% + 30px);
    left:calc(23% + 2px);
    animation: locationBottm 1.5s linear .3s infinite;
}
.map i:nth-child(8) {
    top: calc(61% + 30px);
    left:calc(45% + 2px);
    animation: locationBottm 1.5s linear .4s infinite;
}
@keyframes location {
    100%{
        transform: translateY(4px);
    }
}
@keyframes locationBottm {
    0% {
        opacity: .4;
        box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
        opacity: 1;
        box-shadow: 0 1px 12px #0093df, 0 1px 20px #0093df inset;
    }
}

.map-circle {
    width:80%;
    height:60%;
    position: absolute;
    left:14%;
    top:60%;
    transform: scale(0.8);
    opacity: 1;

}
.map-circle .img1-box {
    transform: rotateX(66deg);
    position: absolute;
    width:100%;
    height:100%;
    left: 0;
    top: 0;
}
.map-circle .img2-box {
    transform: rotateX(66deg) translateZ(10px);
    opacity: .5;
    position: absolute;
    left: 0;
    top: 0;
}
.map-circle .img3-box {
    transform: rotateX(66deg) translateZ(40px);
    position: absolute;
    left: 0;
    top: 0;
}
.map-circle .img4-box {
    transform: rotateX(66deg) translateZ(60px);
    opacity: .6;
    position: absolute;
    left: 0;
    top: 0;
}
.map-circle .img2 {
    animation: float ease-in-out 2s infinite;
}
.img1-box .img1{width:100%;height:100%}
.img1-box .img2{width:100%;height:100%}



@keyframes rotateR {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateL {
    100% {
        transform: rotate(-360deg);
    }
}
/*w外圈*/
.addbg{
    position: absolute;
    background:url("../img/bg-bg.png") no-repeat left center;
    background-size: 100% 100%;
    top: 30%;
    left:-30%;
    width: 150%;
    height: 60%;
}
.login_box {
    top: 52%;
    left: 43%;
    width: 80%;
    height: 80%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(33deg);
}
.login_box1{
    width:100%;
    height:100%;
}
.login_box2{
    width:90%;
    height:90%
}
.login_box ul {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-67deg);
}
.login_box ul li {
    width: 100%;
    height: 100%;
    border: 4px solid #27596d;
    border-radius: 200%;
}
.login_box3{
    width:130%;
    height:130%;
}
.login_box3,.login_box4{
    top: 54%;
    transform: translate(-50%, -50%) rotateY(35deg);
}
.login_box3 ul,.login_box4 ul{
    transform: rotateX(-69deg);
}
.login_box4{
    width:150%;
    height:150%;
}
.login_box3 ul li{
    border:2px dashed #666;
}
.login_box4 ul li{
    border: 2px solid #666;
}
.login_box ul li span {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/hx.png) no-repeat center center;
    background-size: 100% 100%;
    animation: hx 4s linear infinite;
}
.login_pa,.login_pa0,.login_pmont {
    position: absolute;
}
.login_pr {
    position: relative;
}

@keyframes hx {
    to {
        transform: rotate(360deg);
    }
}

/*旋转部分、、、、、、、、、、、、、、、、、、、、、、、、、、*/
.login_section3 {
    width: 120%;
    height: 120%;
}
.u_fr{
    width:100%;
    height:100%;
}
.login_p3d {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.login_section3 .ui_base {
    position: relative;
    top: 25%;
    left: 20%;
    width: 100%;
}

.login_section3 .ball_c {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    width: 225px;
    height: 157px;
    line-height: 157px;
    text-align: center;
    left: 90px;
    top: 100px;
}

.login_section3 .ball_c img {
    width: 125px;
    height: 125px;
}

.login_section3 .ball_c p {
    margin-top: -70px;
}

.login_section3 .ball_c p a {
    font-size: 19px;
    font-family: ""
}

.login_section3 .base {
    -webkit-transform: rotateX(80deg) rotateY(-10deg);
    -moz-transform: rotateX(80deg) rotateY(-10deg);
    -o-transform: rotateX(80deg) rotateY(-10deg);
    -ms-transform: rotateX(80deg) rotateY(-10deg);
    transform: rotateX(80deg) rotateY(-10deg);
    position: relative;
    width: 350px;
    height: 350px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: -38px;
    left: 40px;
}

.login_section3 .ball_base {
    -webkit-transform-origin: 225px 0px;
    -moz-transform-origin: 225px 0px;
    -ms-transform-origin: 225px 0px;
    -o-transform-origin: 225px 0px;
    transform-origin: 225px 0px;
    position: absolute;
    top: 175px;
    left: -50px;
    width: 225px;
    height: 127px
}

.login_section3 .ball_1 {
    -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(0deg) translateY(-70px)
}

.login_section3 .ball_2 {
    -webkit-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(60deg) translateY(-70px)
}

.login_section3 .ball_3 {
    -webkit-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(120deg) translateY(-70px)
}

.login_section3 .ball_4 {
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(180deg) translateY(-70px)
}

.login_section3 .ball_5 {
    -webkit-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(240deg) translateY(-70px)
}

.login_section3 .ball_6 {
    -webkit-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    -ms-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    -o-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    -moz-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
    transform: rotateX(-90deg) rotateY(300deg) translateY(-70px)
}

.login_section3 .ball_1 .ball {
    -webkit-transform: rotateY(10deg) rotateZ(10deg);
    -moz-transform: rotateY(10deg) rotateZ(10deg);
    -o-transform: rotateY(10deg) rotateZ(10deg);
    -ms-transform: rotateY(10deg) rotateZ(10deg);
    transform: rotateY(10deg) rotateZ(10deg)
}

.login_section3 .ball_2 .ball {
    -webkit-transform: rotateY(-50deg) rotateZ(10deg);
    -o-transform: rotateY(-50deg) rotateZ(10deg);
    -ms-transform: rotateY(-50deg) rotateZ(10deg);
    -moz-transform: rotateY(-50deg) rotateZ(10deg);
    transform: rotateY(-50deg) rotateZ(10deg)
}

.login_section3 .ball_3 .ball {
    -webkit-transform: rotateY(-110deg) rotateZ(10deg);
    -o-transform: rotateY(-110deg) rotateZ(10deg);
    -moz-transform: rotateY(-110deg) rotateZ(10deg);
    -ms-transform: rotateY(-110deg) rotateZ(10deg);
    transform: rotateY(-110deg) rotateZ(10deg)
}

.login_section3 .ball_4 .ball {
    -webkit-transform: rotateY(-170deg) rotateZ(10deg);
    -o-transform: rotateY(-170deg) rotateZ(10deg);
    -moz-transform: rotateY(-170deg) rotateZ(10deg);
    -ms-transform: rotateY(-170deg) rotateZ(10deg);
    transform: rotateY(-170deg) rotateZ(10deg)
}

.login_section3 .ball_5 .ball {
    -webkit-transform: rotateY(-230deg) rotateZ(10deg);
    -o-transform: rotateY(-230deg) rotateZ(10deg);
    -moz-transform: rotateY(-230deg) rotateZ(10deg);
    -ms-transform: rotateY(-230deg) rotateZ(10deg);
    transform: rotateY(-230deg) rotateZ(10deg)
}

.login_section3 .ball_6 .ball {
    -webkit-transform: rotateY(-290deg) rotateZ(10deg);
    -o-transform: rotateY(-290deg) rotateZ(10deg);
    -ms-transform: rotateY(-290deg) rotateZ(10deg);
    -moz-transform: rotateY(-290deg) rotateZ(10deg);
    transform: rotateY(-290deg) rotateZ(10deg)
}

.login_section3 .ball {
    -webkit-transition: all 2s ease-out 0ms;
    -o-transition: all 2s ease-out 0ms;
    -moz-transition: all 2s ease-out 0ms;
    -ms-transition: all 2s ease-out 0ms;
    transition: all 2s ease-out 0ms;
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    left: -200px;
    top: -30px;
    overflow: hidden;
}

.login_section3 .ball img {
    width: 110px;
    height: 110px;
}

.login_section3 .ball_1 .ball {
    -webkit-transition-delay: 1100ms;
    -o-transition-delay: 1100ms;
    -moz-transition-delay: 1100ms;
    -ms-transition-delay: 1100ms;
    transition-delay: 1100ms;
}

.login_section3 .ball_2 .ball {
    -webkit-transition-delay: 900ms;
    -moz-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    -ms-transition-delay: 900ms;
    transition-delay: 900ms;
}

.login_section3 .ball_3 .ball {
    -webkit-transition-delay: 700ms;
    -o-transition-delay: 700ms;
    -ms-transition-delay: 700ms;
    -moz-transition-delay: 700ms;
    transition-delay: 700ms;
}

.login_section3 .ball_4 .ball {
    -webkit-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    transition-delay: 500ms;
}

.login_section3 .ball_5 .ball {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.login_section3 .ball_6 .ball {
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms;
}

.login_section3 .ball_1 .ball {
    -webkit-animation: cir1 28s linear 0s infinite;
    -o-animation: cir1 28s linear 0s infinite;
    -ms-animation: cir1 28s linear 0s infinite;
    -moz-animation: cir1 28s linear 0s infinite;
    animation: cir1 28s linear 0s infinite
}

.login_section3 .ball_2 .ball {
    -webkit-animation: cir2 28s linear 0s infinite;
    -o-animation: cir2 28s linear 0s infinite;
    -ms-animation: cir2 28s linear 0s infinite;
    -moz-animation: cir2 28s linear 0s infinite;
    animation: cir2 28s linear 0s infinite
}

.login_section3 .ball_3 .ball {
    -webkit-animation: cir3 28s linear 0s infinite;
    -o-animation: cir3 28s linear 0s infinite;
    -ms-animation: cir3 28s linear 0s infinite;
    -moz-animation: cir3 28s linear 0s infinite;
    animation: cir3 28s linear 0s infinite
}

.login_section3 .ball_4 .ball {
    -webkit-animation: cir4 28s linear 0s infinite;
    -o-animation: cir4 28s linear 0s infinite;
    -ms-animation: cir4 28s linear 0s infinite;
    -moz-animation: cir4 28s linear 0s infinite;
    animation: cir4 28s linear 0s infinite
}

.login_section3 .ball_5 .ball {
    -webkit-animation: cir5 28s linear 0s infinite;
    -o-animation: cir5 28s linear 0s infinite;
    -ms-animation: cir5 28s linear 0s infinite;
    -moz-animation: cir5 28s linear 0s infinite;
    animation: cir5 28s linear 0s infinite
}

.login_section3 .ball_6 .ball {
    -webkit-animation: cir6 28s linear 0s infinite;
    -o-animation: cir6 28s linear 0s infinite;
    -ms-animation: cir6 28s linear 0s infinite;
    -moz-animation: cir6 28s linear 0s infinite;
    animation: cir6 28s linear 0s infinite
}

.login_section3 .base {
    -webkit-animation: cir 28s linear 0s infinite;
    -o-animation: cir 28s linear 0s infinite;
    -ms-animation: cir 28s linear 0s infinite;
    -mozanimation: cir 28s linear 0s infinite;
    animation: cir 28s linear 0s infinite
}

@-webkit-keyframes cir1 {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-360deg) rotateZ(10deg)
    }
}

@keyframes cir1 {
    0% {
        transform: rotateY(0deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-360deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir2 {
    0% {
        -webkit-transform: rotateY(-60deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-420deg) rotateZ(10deg)
    }
}

@keyframes cir2 {
    0% {
        transform: rotateY(-60deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-420deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir3 {
    0% {
        -webkit-transform: rotateY(-120deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-480deg) rotateZ(10deg)
    }
}

@keyframes cir3 {
    0% {
        transform: rotateY(-120deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-480deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir4 {
    0% {
        -webkit-transform: rotateY(-180deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-540deg) rotateZ(10deg)
    }
}

@keyframes cir4 {
    0% {
        transform: rotateY(-180deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-540deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir5 {
    0% {
        -webkit-transform: rotateY(-240deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-600deg) rotateZ(10deg)
    }
}

@keyframes cir5 {
    0% {
        transform: rotateY(-240deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-600deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir6 {
    0% {
        -webkit-transform: rotateY(-300deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-660deg) rotateZ(10deg)
    }
}

@keyframes cir6 {
    0% {
        transform: rotateY(-300deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-660deg) rotateZ(10deg)
    }
}

@keyframes cir {
    0% {
        transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)
    }
}

@-webkit-keyframes cir {
    0% {
        -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)
    }
}
.login_dl{
    position:absolute;
    top:calc(18% + 87px);
    right:8%;
    width:18%;
    height:40%;
    background: url("../img/login_dl.png") no-repeat left center;
    background-size:100% 100%;
}
#projectLog {
  position:absolute;
  top:calc(18% + 30px);
  right:10%;
  width:20%;
  height: 4%;
}
#projectLog p {
  color: #00eaff;
  font-size: 1.5rem;
  text-align: center;
  white-space: nowrap;
}
#projectLog P:last-child {
  font-size: 0.3rem;
}
.login_user,.login_pssword{
    width:70%;
    height:10%;
    margin:8% auto;
}
.login_user{
    margin-top: 20%;
}
.login_pssword{
    margin-bottom:0px;
}
.login_user{
    box-sizing: border-box;
    background:url("../img/login_dlicon01.png")  no-repeat 10px center;

}
.login_pssword{
    background:url("../img/login_dlicon02.png")  no-repeat 10px center;

}
.login_user input,.login_pssword input{
    box-sizing: border-box;
    border:1px solid #404040;
    width:100%;
    height:100%;
    border-radius:10px 0px 10px 0px;
    background:none;
    color: #fff;
    padding-left: calc(15% + 20px);
    outline: none;
}
.login_dlmm{
    float:left;
    margin-left:16%;
    margin-bottom:5%;
    margin-top:5%;
    height:20px;
    line-height:20px;
    clear:both;
}
.login_dlmm input {
    vertical-align: middle;
    margin-bottom: 2.3px;
    background:none;
    margin-right:5px;
}
.login_dlmenu{
    width:70%;
    height:10%;
    margin:8% auto;
    clear:both;
}
.login_dlmenu input{
    background:#1d3385;
    width:30%;
    margin-left:35%;
    height:100%;
    border:0px;
    border-radius:5px;
    color:#fff;
    font-size:1.5rem;
    text-align:center;
    outline: none;
    cursor: pointer;
}
/* 解决input背景色改变问题 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: #ededed !important;
	-webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
  background-color:transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s; /*背景色透明  生效时长  过渡效果  启用时延迟的时间*/
}
input {
	 background-color:transparent;
}
